<template>
    <view class="menu-item flex-layout-row shadow" @click="click">
        <view :style="{ backgroundColor: bgColor }" class="menu-icon flex-center">
            <iconfont size="24px" :color="color" :name="icon"></iconfont>
        </view>
        <text class="menu-item-name gap-row h3">{{ name }}</text>
        <iconfont size="22px" color="#999" :name="$store.state.dir == 'rtl' ? 'icon-arrow-left' : 'icon-arrow-right'"></iconfont>
    </view>
</template>

<script>
export default {
    name: 'menu-item',
    props: {
        color: String,
        bgColor: String,
        name: String,
        data: String,
        icon: String
    },
    data() {
        return {};
    },
    methods: {
        click() {
            this.$emit('action', this.data);
        }
    }
};
</script>

<style lang="scss">
.menu-item {
    background-color: #fff;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    .menu-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background-color: $app-color-flat;
    }
    &-name {
        flex: 1;
    }
}
</style>
